﻿<!-- Views/Employee/StartPractice.cshtml - 修复判断题部分 -->
@model WebApplication1.Models.Exam

@{
    ViewBag.Title = WebApplication1.Utilities.LanguageManager.GetText("PracticeMode") + " - " + WebApplication1.Utilities.LanguageManager.GetText("ExamTitle");
}

<div class="container-fluid px-0">
    <!-- 练习头部信息 -->
    <div class="exam-header bg-success text-white p-3 sticky-top">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-1">@ViewBag.PageTitle</h5>
                <small>@WebApplication1.Utilities.LanguageManager.GetText("PracticeModeDescription")</small>
            </div>
        </div>
        <div class="progress mt-2">
            <div class="progress-bar bg-success" role="progressbar" id="progressBar" style="width: 0%"></div>
        </div>
    </div>

    <div class="questions-container" id="questionsContainer">
        @{
            var questions = Model.Questions.Where(x=>x.IsActive).ToList();
        }

        @for (int i = 0; i < questions.Count; i++)
        {
            var question = questions[i];
            <div class="question-page @(i == 0 ? "active" : "")" data-question-index="@i" id="question_@i">
                <div class="question-content p-3">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <span class="badge bg-success">第 @(i + 1) 题</span>
                            <span class="badge bg-info ms-2">@question.Score @ViewBag.Score</span>
                        </div>
                        <div>
                            @if (question.QuestionType == "Single")
                            {
                                <span class="badge bg-info">@ViewBag.SingleChoice</span>
                            }
                            else if (question.QuestionType == "Multiple")
                            {
                                <span class="badge bg-success">@ViewBag.MultipleChoice</span>
                            }
                            else if (question.QuestionType == "TrueFalse")
                            {
                                <span class="badge bg-warning">@ViewBag.TrueFalse</span>
                            }
                            else if (question.QuestionType == "Fill")
                            {
                                <span class="badge bg-danger">@ViewBag.FillBlank</span>
                            }
                        </div>
                    </div>

                    <div class="question-text mb-4">
                        <p class="fw-bold fs-6 mb-0">@question.QuestionText</p>
                    </div>

                    @if (question.QuestionType == "Fill")
                    {
                        <!-- 填空题输入框 -->
                        <div class="form-group mb-4">
                            <label class="form-label fw-bold mb-2">@ViewBag.FillAnswer：</label>
                            <textarea class="form-control form-control-lg fill-answer-textarea"
                                      name="question_@question.QuestionId"
                                      data-question-id="@question.QuestionId"
                                      rows="3"
                                      placeholder="@WebApplication1.Utilities.LanguageManager.GetText("FillAnswerPlaceholder")"></textarea>
                            <!-- 隐藏存储正确答案 -->
                            <input type="hidden" id="correct_@question.QuestionId" value="@question.CorrectAnswer" />
                            <input type="hidden" id="correct_text_@question.QuestionId" value="@question.CorrectAnswer" />
                        </div>
                    }
                    else if (question.QuestionType == "Single")
                    {
                        {
                            // 单选题选项随机打乱
                            var optionList = question.Options.OrderBy(o => o.OptionLabel).ToList();
                            var shuffledOptionIndices = Enumerable.Range(0, optionList.Count).OrderBy(x => Guid.NewGuid()).ToList();

                            // 计算打乱顺序后的正确答案和文字描述
                            var originalCorrectAnswer = question.CorrectAnswer;
                            var newCorrectAnswer = "";
                            var newCorrectAnswerText = "";

                            for (int k = 0; k < optionList.Count; k++)
                            {
                                var originalIndex = shuffledOptionIndices[k];
                                var originalOptionLabel = optionList[originalIndex].OptionLabel;
                                var displayLabel = ((char)('A' + k)).ToString();

                                if (originalOptionLabel == originalCorrectAnswer)
                                {
                                    newCorrectAnswer = displayLabel;
                                    newCorrectAnswerText = optionList[originalIndex].OptionText;
                                    break;
                                }
                            }
                            ViewBag.optionList = optionList;
                            ViewBag.shuffledOptionIndices = shuffledOptionIndices;
                            ViewBag.newCorrectAnswer = newCorrectAnswer;
                            ViewBag.newCorrectAnswerText = newCorrectAnswerText;
                        }
                        <!-- 隐藏存储打乱顺序后的正确答案 -->
                        <input type="hidden" id="correct_@question.QuestionId" value="@ViewBag.newCorrectAnswer" />
                        <input type="hidden" id="correct_text_@question.QuestionId" value="@ViewBag.newCorrectAnswerText" />

                        <div class="options-container mb-4">
                            @for (int j = 0; j < ViewBag.optionList.Count; j++)
                            {
                                var optionIndex = ViewBag.shuffledOptionIndices[j];
                                var option = ViewBag.optionList[optionIndex];
                                var displayLabel = ((char)('A' + j)).ToString();
                                <div class="custom-option custom-option-radio mb-3">
                                    <input type="radio"
                                           name="question_@question.QuestionId"
                                           id="q@(question.QuestionId)_@displayLabel"
                                           value="@displayLabel"
                                           class="custom-option-input"
                                           data-display-label="@displayLabel"
                                           data-option-text="@option.OptionText"
                                           data-question-id="@question.QuestionId" />
                                    <label class="custom-option-label"
                                           for="q@(question.QuestionId)_@displayLabel">
                                        <span class="custom-option-marker">
                                            <span class="custom-option-marker-inner"></span>
                                        </span>
                                        <span class="custom-option-text">
                                            <span class="badge bg-secondary me-2">@displayLabel</span>
                                            <span>@option.OptionText</span>
                                        </span>
                                    </label>
                                </div>
                            }
                        </div>
                    }
                    else if (question.QuestionType == "Multiple")
                    {
                        {
                            // 多选题选项随机打乱
                            var optionList = question.Options.OrderBy(o => o.OptionLabel).ToList();
                            var shuffledOptionIndices = Enumerable.Range(0, optionList.Count).OrderBy(x => Guid.NewGuid()).ToList();

                            // 计算打乱顺序后的正确答案和文字描述
                            var originalCorrectAnswers = question.CorrectAnswer.Split(',').ToList();
                            var newCorrectAnswers = new List<string>();
                            var newCorrectAnswerTexts = new List<string>();

                            for (int k = 0; k < optionList.Count; k++)
                            {
                                var originalIndex = shuffledOptionIndices[k];
                                var originalOptionLabel = optionList[originalIndex].OptionLabel;
                                var displayLabel = ((char)('A' + k)).ToString();

                                if (originalCorrectAnswers.Contains(originalOptionLabel))
                                {
                                    newCorrectAnswers.Add(displayLabel);
                                    newCorrectAnswerTexts.Add(optionList[originalIndex].OptionText);
                                }
                            }

                            var newCorrectAnswerString = string.Join(",", newCorrectAnswers.OrderBy(x => x));
                            var newCorrectAnswerTextString = string.Join("; ", newCorrectAnswerTexts.OrderBy(x => x));

                            ViewBag.optionList1 = optionList;
                            ViewBag.shuffledOptionIndices1 = shuffledOptionIndices;
                            ViewBag.newCorrectAnswerString = newCorrectAnswerString;
                            ViewBag.newCorrectAnswerTextString = newCorrectAnswerTextString;
                        }
                        <!-- 隐藏存储打乱顺序后的正确答案 -->
                        <input type="hidden" id="correct_@question.QuestionId" value="@ViewBag.newCorrectAnswerString" />
                        <input type="hidden" id="correct_text_@question.QuestionId" value="@ViewBag.newCorrectAnswerTextString" />

                        <div class="options-container mb-4">
                            @for (int j = 0; j < ViewBag.optionList1.Count; j++)
                            {
                                var optionIndex = ViewBag.shuffledOptionIndices1[j];
                                var option = ViewBag.optionList1[optionIndex];
                                var displayLabel = ((char)('A' + j)).ToString();
                                <div class="custom-option custom-option-checkbox mb-3">
                                    <input type="checkbox"
                                           name="question_@question.QuestionId"
                                           id="q@(question.QuestionId)_@displayLabel"
                                           value="@displayLabel"
                                           class="custom-option-input"
                                           data-display-label="@displayLabel"
                                           data-option-text="@option.OptionText"
                                           data-question-id="@question.QuestionId" />
                                    <label class="custom-option-label"
                                           for="q@(question.QuestionId)_@displayLabel">
                                        <span class="custom-option-marker">
                                            <span class="custom-option-marker-inner"></span>
                                        </span>
                                        <span class="custom-option-text">
                                            <span class="badge bg-secondary me-2">@displayLabel</span>
                                            <span>@option.OptionText</span>
                                        </span>
                                    </label>
                                </div>
                            }
                        </div>
                    }
                    else if (question.QuestionType == "TrueFalse")
                    {
                        <!-- 隐藏存储判断题的正确答案 -->
                        <input type="hidden"  id="correct_@question.QuestionId" value="@question.CorrectAnswer" />
                        {
                            // 根据正确答案显示对应的文字描述
                            var correctAnswerText = question.CorrectAnswer == "True" ? ViewBag.True : ViewBag.False;
                            ViewBag.correctAnswerText = correctAnswerText;
                        }
                        <input type="hidden" id="correct_text_@question.QuestionId" value="@ViewBag.correctAnswerText" />

                        <div class="options-container mb-4">
                            <div class="custom-option custom-option-radio mb-3">
                                <input type="radio"
                                       name="question_@question.QuestionId"
                                       id="q@(question.QuestionId)_T"
                                       value="True"
                                       class="custom-option-input"
                                       data-display-label="@ViewBag.True"
                                       data-option-text="@ViewBag.True"
                                       data-question-id="@question.QuestionId" />
                                <label class="custom-option-label"
                                       for="q@(question.QuestionId)_T">
                                    <span class="custom-option-marker">
                                        <span class="custom-option-marker-inner"></span>
                                    </span>
                                    <span class="custom-option-text">
                                        <i class="glyphicon glyphicon-ok-circle text-success me-2"></i>
                                        <span>@ViewBag.True</span>
                                    </span>
                                </label>
                            </div>
                            <div class="custom-option custom-option-radio mb-3">
                                <input type="radio"
                                       name="question_@question.QuestionId"
                                       id="q@(question.QuestionId)_F"
                                       value="False"
                                       class="custom-option-input"
                                       data-display-label="@ViewBag.False"
                                       data-option-text="@ViewBag.False"
                                       data-question-id="@question.QuestionId" />
                                <label class="custom-option-label"
                                       for="q@(question.QuestionId)_F">
                                    <span class="custom-option-marker">
                                        <span class="custom-option-marker-inner"></span>
                                    </span>
                                    <span class="custom-option-text">
                                        <i class="glyphicon glyphicon-remove-circle text-danger me-2"></i>
                                        <span>@ViewBag.False</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    }

                    <!-- 答案显示区域（初始隐藏） -->
                    <div class="answer-result mt-4" id="answer_result_@question.QuestionId" style="display: none;">
                        <div class="card border-success">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0">@WebApplication1.Utilities.LanguageManager.GetText("AnswerFeedback")</h6>
                            </div>
                            <div class="card-body">
                                <div class="result-indicator text-center mb-3">
                                    <h4 id="result_text_@question.QuestionId"></h4>
                                    <i id="result_icon_@question.QuestionId" class="glyphicon" style="font-size: 2rem;"></i>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="bg-info bg-opacity-10 p-3 rounded mb-3">
                                            <strong>@ViewBag.YourAnswer:</strong>
                                            <div class="mt-2" id="user_answer_display_@question.QuestionId"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bg-success bg-opacity-10 p-3 rounded mb-3">
                                            <strong>@ViewBag.CorrectAnswer:</strong>
                                            <div class="mt-2" id="correct_answer_display_@question.QuestionId"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="mt-4">
                        <button type="button" class="btn btn-primary check-answer-btn"
                                data-question-id="@question.QuestionId"
                                data-question-type="@question.QuestionType">
                            <i class="glyphicon glyphicon-check"></i> @ViewBag.CheckAnswer
                        </button>
                        <button type="button" class="btn btn-success next-question-btn d-none"
                                data-question-id="@question.QuestionId">
                            <i class="glyphicon glyphicon-arrow-right"></i> @ViewBag.ContinuePractice
                        </button>
                    </div>
                </div>
            </div>
        }
    </div>
</div>
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<style>
    body {
        background-color: #f8f9fa;
    }

    .exam-header {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .question-page {
        display: none;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        margin: 20px;
        padding: 20px;
    }

        .question-page.active {
            display: block;
        }

    /* 自定义选项样式 */
    .custom-option {
        position: relative;
        display: block;
    }

    .custom-option-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-option-label {
        display: flex;
        align-items: flex-start;
        padding: 15px 20px;
        background-color: #fff;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 0;
    }

        .custom-option-label:hover {
            border-color: #28a745;
            background-color: #f0fff4;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
        }

    .custom-option-input:checked + .custom-option-label {
        border-color: #28a745;
        background-color: #f0fff4;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
    }

    .custom-option-marker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-right: 15px;
        border: 2px solid #adb5bd;
        border-radius: 50%;
        transition: all 0.2s ease;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .custom-option-input:checked + .custom-option-label .custom-option-marker {
        border-color: #28a745;
        background-color: #28a745;
    }

    .custom-option-marker-inner {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: transparent;
        transition: all 0.2s ease;
    }

    .custom-option-input:checked + .custom-option-label .custom-option-marker-inner {
        background-color: #fff;
    }

    /* 多选框样式 */
    .custom-option-checkbox .custom-option-marker {
        border-radius: 4px;
    }

    .custom-option-checkbox .custom-option-marker-inner {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    .custom-option-checkbox .custom-option-input:checked + .custom-option-label .custom-option-marker-inner {
        background-color: #fff;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    .custom-option-text {
        flex: 1;
        font-weight: 500;
        color: #495057;
    }

    .custom-option-input:checked + .custom-option-label .custom-option-text {
        color: #28a745;
        font-weight: 600;
    }

    .fill-answer-textarea {
        min-height: 120px;
        resize: vertical;
        font-size: 1rem;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
        border-width: 2px;
    }

    .btn {
        margin: 5px;
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 5px;
    }

    @@media (max-width: 576px) {
        .question-page {
            margin: 10px;
            padding: 15px;
        }

        .custom-option-label {
            padding: 12px 15px;
        }

        .btn {
            padding: 8px 15px;
            font-size: 0.9rem;
        }

        .fill-answer-textarea {
            min-height: 100px;
            font-size: 0.9rem;
            padding: 12px;
        }
    }
</style>

<script>
    $(document).ready(function() {
        let currentQuestionIndex = 0;
        const totalQuestions = @Model.Questions.Where(x=>x.IsActive).ToList().Count;

        // 更新进度条
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100;
            $('#progressBar').css('width', progress + '%');
        }

        // 检查答案按钮点击事件
        $('.check-answer-btn').click(function() {
            const questionId = $(this).data('question-id');
            const questionType = $(this).data('question-type');
            let userAnswer = '';
            let userAnswerText = '';

            if (questionType === 'Fill') {
                userAnswer = $('textarea[name="question_' + questionId + '"]').val();
                userAnswerText = userAnswer;
            } else if (questionType === 'Single') {
                const selected = $('input[name="question_' + questionId + '"]:checked');
                if (selected.length > 0) {
                    userAnswer = selected.val();
                    userAnswerText = selected.data('option-text') || selected.closest('.custom-option').find('.custom-option-text').text();
                }
            } else if (questionType === 'Multiple') {
                const selected = $('input[name="question_' + questionId + '"]:checked');
                const answers = [];
                const answerTexts = [];
                selected.each(function() {
                    answers.push($(this).val());
                    answerTexts.push($(this).data('option-text') || $(this).closest('.custom-option').find('.custom-option-text').text().replace($(this).val() + '.', '').trim());
                });
                userAnswer = answers.sort().join(',');
                userAnswerText = answerTexts.join('; ');
            } else if (questionType === 'TrueFalse') {
                const selected = $('input[name="question_' + questionId + '"]:checked');
                if (selected.length > 0) {
                    userAnswer = selected.val();
                    // 对于判断题，直接使用选项上的文本数据
                    userAnswerText = selected.data('option-text') || (userAnswer === 'T' ? '@ViewBag.True' : '@ViewBag.False');
                }
            }

            if (!userAnswer) {
                alert('@WebApplication1.Utilities.LanguageManager.GetText("PleaseSelectAnswer")');
                return;
            }

            // 获取该题的正确答案和正确答案文字描述
            const correctAnswer = $('#correct_' + questionId).val();
            const correctAnswerText = $('#correct_text_' + questionId).val();

            // 发送 AJAX 请求检查答案
            $.ajax({
                url: '@Url.Action("SubmitPracticeAnswer", "Employee")',
                type: 'POST',
                data: {
                    examId: @Model.ExamId,
                    questionId: questionId,
                    userAnswer: userAnswer,
                    userAnswerText: userAnswerText,
                    correctAnswer: correctAnswer,
                    correctAnswerText: correctAnswerText
                },
                success: function(response) {
                    if (response.success) {
                        // 显示答案结果

                        console.log(response);
                     
                        $('#answer_result_' + questionId).show();

                        // 显示用户答案
                        $('#user_answer_display_' + questionId).text(response.userAnswerText || response.userAnswer);

                        // 显示正确答案
                        $('#correct_answer_display_' + questionId).text(response.correctAnswerText || response.correctAnswer);

                        // 显示结果
                        if (response.isCorrect) {
                            $('#result_text_' + questionId).text('@ViewBag.Correct');
                            $('#result_icon_' + questionId).addClass('glyphicon-ok-circle text-success');
                        } else {
                            $('#result_text_' + questionId).text('@ViewBag.Incorrect');
                            $('#result_icon_' + questionId).addClass('glyphicon-remove-circle text-danger');
                        }

                        // 隐藏检查答案按钮，显示继续练习按钮
                        $('.check-answer-btn[data-question-id="' + questionId + '"]').addClass('d-none');
                        $('.next-question-btn[data-question-id="' + questionId + '"]').removeClass('d-none');
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert('@WebApplication1.Utilities.LanguageManager.GetText("SubmitError")');
                }
            });
        });

        // 继续练习按钮点击事件
        $('.next-question-btn').click(function() {
            const questionId = $(this).data('question-id');
            if (currentQuestionIndex < totalQuestions - 1) {
                $('.question-page').removeClass('active');
                currentQuestionIndex++;
                $('#question_' + currentQuestionIndex).addClass('active');
                updateProgress();

                // 重置界面
                $('#answer_result_' + questionId).hide();
                $('.check-answer-btn[data-question-id="' + questionId + '"]').removeClass('d-none');
                $('.next-question-btn[data-question-id="' + questionId + '"]').addClass('d-none');

                // 清空选择
                $('input[name="question_' + questionId + '"]').prop('checked', false);
                $('textarea[name="question_' + questionId + '"]').val('');
            } else {
                // 练习完成，跳转到结果页面
                window.location.href = '@Url.Action("EndPractice", "Employee")';
            }
        });

        // 初始化进度条
        updateProgress();
    });
</script>